<template>
  <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "WelcomeEchen",
  data() {
    return {
      labList: [],
    };
  },
  methods: {
    drawChart() {
      // this.char=echarts.init(document.getElementById("main"));
      var app = {};
      this.char = echarts.init(document.getElementById("main"));
      // var chartDom = document.getElementById('main');
      // var myChart = echarts.init(chartDom);
      // var option;

      var posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right",
          },
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom",
          },
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {}),
        },
        distance: {
          min: 0,
          max: 100,
        },
      };

      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function () {
          var labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance,
            },
          };
          // myChart.setOption({
          this.char.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          });
        },
      };

      var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: "{c}  {name|{a}}",
        fontSize: 16,
        rich: {
          name: {},
        },
      };

      // option = {
      this.char.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["Forest", "Steppe", "Desert", "Wetland"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["2012", "2013", "2014", "2015", "2016"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        seriess: [
          // {
          //     name: 'Forest',
          //     type: 'bar',
          //     barGap: 0,
          //     label: labelOption,
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [320, 332, 301, 334, 390]
          // },
          // {
          //     name: 'Steppe',
          //     type: 'bar',
          //     label: labelOption,
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [220, 182, 191, 234, 290]
          // },
          // {
          //     name: 'Desert',
          //     type: 'bar',
          //     label: labelOption,
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [150, 232, 201, 154, 190]
          // },
          // {
          //     name: 'Wetland',
          //     type: 'bar',
          //     label: labelOption,
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [98, 77, 101, 99, 40]
          // }
        ],
      });
      // console.log(this.seriess)
      // option && myChart.setOption(option);
      // this.$axios.get(' http://localhost:3000/Sales')
      // .then((res)=>{
      //   console.log(res)
      //   this.labList=res.data
      //   console.log(this.labList)
      //      this.char.setOption({
      //         seriess:this.labList

      //     })

      // })
      this.$axios.get("http://localhost:3000/Sales").then((item) => {
        // console.log(res)
        this.labList = item.data;
        console.log(this.labList);
        this.char.setOption({
          series: this.labList,
        });
      });
    },
  },
  mounted(){
      this.drawChart();
  }
};
</script>

<style  scoped>
</style>>

